<template>
  <div class="box">
     <div class="img">
          <img :src="dataList.portrait" alt="" srcset="">
          <div class="userName">
              <p>{{dataList.user_name}}</p>
              <p>{{dataList.dept_name}}</p>
          </div>
     </div>
     <div class="detail">
        <div class="van-hairline--bottom body ">
            <p class="deptName">所属部门</p>
            <p class="dept">{{dataList.dept_name}}</p>
        </div>
        <div class="van-hairline--bottom body ">
            <p class="deptName">姓名</p>
            <p class="dept">{{dataList.user_name}}</p>
        </div>
        <div class="van-hairline--bottom body ">
            <p class="deptName">手机号</p>
            <p class="dept">{{dataList.phone}}</p>
        </div>
         <div class="van-hairline--bottom body ">
            <p class="deptName">邮箱</p>
            <p class="dept">{{dataList.email}}</p>
        </div>
     </div>
     <div class="dianzhan" @click="giveLike()">
         <span class=" iconfont icon-mn_dianzhan_fill"></span>
     </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        dataList:{},
        phone:'',
    };
  },
  methods:{
     giveLike(){
         this.$router.push({
             path:'/giveLike',
             query:{id:this.dataList.id}
         })
     }
  },
  created(){
      if (localStorage.person) {
          this.dataList = JSON.parse(localStorage.getItem('person'));
      }
  }
};
</script>
<style lang="scss" scoped>
   .img{
       opacity: 0.5;
       background: #000000;
       position: relative;
       img{
           width: 190px;
           height: 190px;
           margin: 0 auto;

       }
       .userName{
           color: #fff;
           font-size: 16px;
           z-index: 333;
           position: absolute;
           bottom: 7%;
           left: 5%;
       }
   }
   .detail{
       background: #fff;
       margin-top: 10px;
       .body{
           margin-left: 15px;
        padding: 10px 0;
        .deptName{
          font-size: 12px;
          color: #9B9B9B;
       }
       .dept{
           margin-top: 5px;
           font-size: 14px;
       }
       }

   }
   .dianzhan{
       position: fixed;
       bottom: 5%;
       right: 40%;
       width: 60px;
       height: 60px;
       background: #FF894B ;
       text-align: center;
       border-radius:50%;
   }
.icon-mn_dianzhan_fill{
    font-size: 30px;
    color: #fff;

    line-height: 60px;
}
</style>


